<template>
  <div id="jobManagement">
    <el-dialog fullscreen title="岗位编辑" :visible.sync="dialogFormVisible">
      <div style="display: flex;justify-content: space-between">
        <el-form ref="ruleForm" :label-position="labelPosition" style="width: 40%" :model="addJob">
          <el-form-item prop="workName"
                        :rules="[{required:true,message:'请输入岗位名称'}]"
                        label="岗位名称" :label-width="formLabelWidth">
            <el-input size="mini" v-model="addJob.workName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="workKind"
                        label="岗位类别"
                        :rules="[{required:true,message:'请输入岗位类别'}]"
                        :label-width="formLabelWidth">
            <el-input size="mini" v-model="addJob.workKind" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="personNum"
                        label="需要人数"
                        :rules="[{required:true,message:'请输入需要人数'}]"
                        :label-width="formLabelWidth">
            <el-input size="mini" v-model="addJob.personNum" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="岗位地址" :label-width="formLabelWidth">
            <h5>地址:{{addJob.address}}</h5>
            <el-select class="address" size="mini" v-model="selectPro" placeholder="省">
              <el-option
                  v-for="item in provinces"
                  :key="item.adcode"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
            <el-select class="address" size="mini" v-model="selectCity" placeholder="市">
              <el-option
                  v-for="item in cities"
                  :key="item.adcode"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
            <el-select class="address" size="mini" v-model="selectArea" placeholder="区/县">
              <el-option
                  v-for="item in areas"
                  :key="item.adcode"
                  :label="item.name"
                  :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              prop="treatment"
              :rules="[{required:true,pattern:/^([\u0391-\uFFE5\d\w,])*([\u0391-\uFFE5\d\w]+)$/, message:'请输入合法的公司福利,如(五险一金,不加班,13薪)'}]"
              label="公司福利" :label-width="formLabelWidth">
            <el-input size="mini" v-model="addJob.treatment" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
              label="学历和经验要求"
              prop="degree"
              :rules="[{required:true,message:'请选择学历要求'}]"
              :label-width="formLabelWidth">
            <el-select class="address" size="mini" v-model="addJob.degree" placeholder="学历要求">
              <el-option
                  v-for="item in educations"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
            <el-select class="address" size="mini" v-model="addJob.experience" placeholder="经验要求">
              <el-option
                  v-for="item in experiences"
                  :key="item"
                  :label="item"
                  :value="item">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
              label="岗位薪资"
              prop="salary"
              :rules="[{required:true,pattern:/^\d+(-\d+)*$/,message:'请输入合法的岗位薪资,如1000-2000'}]"
              :label-width="formLabelWidth">
            <el-input size="mini" v-model="addJob.salary" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
              prop="publisher"
              :rules="[{required:true,message:'请输入你的称呼'}]"
              label="你的称呼" :label-width="formLabelWidth">
            <el-input size="mini" v-model="addJob.publisher" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item
              prop="publisherWork"
              :rules="[{required:true,message:'请输入你的职称'}]"
              label="你的职称" :label-width="formLabelWidth">
            <el-input size="mini" v-model="addJob.publisherWork" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <el-form style="width: 58%">
          <el-form-item :label-width="formLabelWidth" label="岗位职责">
            <div v-for="(item,index) in addJob.duties" :key="item.dutyId" style="display: flex;align-items: center">
              <el-input  v-model="item.dutyExplain" size="mini"></el-input>
              <el-button style="margin-left: 20px" @click="upRecDuty(item,index)"  circle size="mini" type="primary" icon="el-icon-check"></el-button>
              <el-button @click="deleteDuty(item.dutyId)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
            </div>
            <el-button @click="addRecDuty(addJob.id)" size="mini" type="primary">添加</el-button>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="技能要求">
            <div v-for="(item,index) in addJob.skills" :key="item.skillId" style="display: flex;align-items: center">
              <el-input  v-model="item.skillExplain" size="mini"></el-input>
              <el-button style="margin-left: 20px" @click="upRecSkill(item,index)"  circle size="mini" type="primary" icon="el-icon-check"></el-button>
              <el-button @click="deleteSkill(item.skillId)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
            </div>
            <el-button @click="addRecSkill(addJob.id)" size="mini" type="primary">添加</el-button>
<!--            <el-button @click="upRecSkill" type="success" size="mini">保存</el-button>-->
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="upDataSubmit()">确 定</el-button>
      </div>
    </el-dialog>
    <el-button @click="addJobHandle()" size="mini">新增岗位</el-button>
    <el-table
        :data="jobList"
        stripe
        style="width: 100%">
      <el-table-column
          prop="id"
          label=ID
          width="180">
      </el-table-column>
      <el-table-column
          label="编辑日期"
          width="180">
        <template slot-scope="scope">
          {{scope.row.updateDate|formatDate}}
        </template>
      </el-table-column>
      <el-table-column
          label="岗位名称"
          width="180">
        <template slot-scope="scope">
          {{scope.row.workName||'未填写'}}
        </template>
      </el-table-column>
      <el-table-column
          label="发布人">
        <template slot-scope="scope">
          {{scope.row.publisher||'未填写'}}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{scope.row.state?'已发布':'未发布'}}
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="210">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="primary" size="mini">编辑</el-button>
          <el-button @click="publishSwitch(scope.row.id)" type="success"  size="mini">{{scope.row.state?"下架":"发布"}}</el-button>
          <el-button @click="deleteHandle(scope.row.id)"  type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  addRec,
  getRecList,
  upRec,
  recRelease,
  delRec,
  addRecsSkill,
  delRecSkill,
  putRecSkill, addDuty, delDudy, putDudy, getUnitRec
} from "@/api/recruitment";
import {getProvinces} from "@/api/map";

export default {
  name: "jobManagement",
  data() {
    return {
      provinces:[],
      cities:[],
      areas:[],
      selectPro:'',
      selectCity:'',
      selectArea:'',
      educations:['不限','大专','本科','硕士'],
      experiences:['不限','一年以上','两年以上','三年以上','五年以上'],
      labelPosition: 'left',
      addJob:{
        id:0,
        duties:[],
        skills:[],
        workName: '',
        workKind:'',
        experience:'',
        address: '上海市',
        state:0,
        salary:'',
        degree:'',
        treatment:'',
        publisher:'',
        publisherWork:''
      },
      jobList: [],
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
    }
  },
  created() {
    this.getList()
    this.getProvince()
  },
  watch: {
    selectCity: function () {
        this.getAreas()
    },
    selectPro: function () {
      this.getCity()
    },
  },
  // filters:{
  //   formatDate(date){
  //     date=new Date(date)
  //     let y = date.getFullYear();
  //     let m = date.getMonth() + 1;
  //     m = m < 10 ? '0' + m : m;
  //     let d = date.getDate();
  //     d = d < 10 ? ('0' + d) : d;
  //     return y + '-' + m + '-' + d;
  //   }
  // },
  computed:{
    address(){
      return this.selectPro+this.selectCity+this.selectArea
    }
  },
  methods:{
    getList(){
      getRecList(this.$store.getters["user/getUser"].uid).then(res=>{
        console.log(res)
        this.jobList=res.data.extend.recruitments
      })
    },
    handleClick(row){
      getUnitRec(row.id).then(res=>{
        console.log(res)
        this.addJob=res.data.extend.recruitment
      })
      this.selectPro=''
      this.selectCity=''
      this.selectArea=''
      this.dialogFormVisible=true
    },
    upAddJob(){
      getUnitRec(this.addJob.id).then(res=>{
        console.log(res)
        this.addJob.skills=res.data.extend.recruitment.skills
        this.addJob.duties=res.data.extend.recruitment.duties
      })
    },
    deleteHandle(id){
      delRec(id).then(res=>{
        this.$message.success(res.data.msg)
        this.getList()
      })
    },
    async upDataJob(){
      this.addJob.address=this.address
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          upRec(this.addJob).then(res=>{
            this.selectArea=''
            this.selectCity=''
            this.selectPro=''
            this.cities=[]
            this.areas=[]
            this.$message.success(res.data.msg)
            this.getList()
            this.dialogFormVisible=false
          })
        } else {
          this.$message.warning("请按格式填写完所有内容")
          return false;
        }
      });

    },
    upDataSubmit(){
      this.upDataJob()

    },
    publishSwitch(id){
      recRelease(id).then(res=>{
        this.$message.success(res.data.msg)
        this.getList()
      })
    },
    addJobHandle(){
      addRec({}).then(res=>{
        console.log(res)
        this.$message.success("新增岗位成功!请在岗位列表中编辑岗位或者发布~")
        this.getList()
      })
    },
    addRecSkill(id){
      addRecsSkill({recruitmentId:id}).then(res=>{
        console.log(res)
        // this.addJob.skills.push(res.data.recruitmentSkill)
        this.upAddJob()
      })
    },
    deleteSkill(id){
      delRecSkill(id).then(res=>{
        this.$message.success(res.data.msg)
        this.upAddJob()
      })
    },
    upRecSkill(item){
      putRecSkill(item).then(res=>{
        console.log(res)
        this.$message.success(res.data.msg)
        this.upAddJob()
      })
    },
    addRecDuty(id){
      addDuty({recruitmentId:id}).then(res=>{
        console.log(res)
        // this.addJob.duties.push(res.data.recruitmentDuty)
        this.upAddJob()
      })
    },
    deleteDuty(id){
      delDudy(id).then(res=>{
        this.$message.success(res.data.msg)
        this.upAddJob()
      })
    },
    upRecDuty(item){
      putDudy(item).then(res=>{
        console.log(res)
        this.$message.success(res.data.msg)
      })
    },
    getProvince(){
      getProvinces('中国').then(res=>{
        this.provinces=res
      })
    },
    getCity(){
      getProvinces(this.selectPro).then(res=>{
        this.cities=res
        console.log(res)
        this.selectCity=this.cities[0].name
      })
    },
    getAreas(){
      getProvinces(this.selectCity).then(res=>{
        this.areas=res
        this.selectArea=this.areas[0].name
      })
    },
  }
}
</script>

<style lang="stylus" scoped>
#jobManagement
  padding 10px
  overflow-y scroll
  overflow-x hidden
  height 100%
.address
  width 30%
  margin-right 3%
</style>
